
<toaster-container toaster-options="{'position-class': 'toast-top-right', 'close-button':true}"></toaster-container>

<!-- 导航条 -->
<div class="bg-white bread-crumb">
    <ul class="breadcrumb b-a m-b-n-xs lter b-b wrapper-md">
        <li><a ui-sref="main"><i class="glyphicon glyphicon-modal-window"></i> 设备管理</a></li>
        <li><a ui-sref="main.dm.warn.list" class="active" ng-bind="title"></a></li>
    </ul>
    <div class="changeWindows">
        <span class="oneWin" ng-click="changeWin(1)"></span>
        <span class="fourWin" ng-click="changeWin(4)"></span>
        <span class="nineWin" ng-click="changeWin(9)"></span>
    </div>
</div>

<!-- 加载提醒 -->
<div ng-show="loading" class="text-center m-t-md text-lg"><i class="fa fa-spin fa-spinner"></i> 数据加载中...</div>

<!-- 内容区域 -->
<div ng-hide="loading" class="wrapper-md content">
    <!-- 数据显示 -->
    <div class="wrapper-data clearfix">

        <div class="data-left">
            <select name="real" ng-change="getarea()" ng-model="icity.code_" id="city">
                <option value='' disabled selected style='display:none;'>市</option>
                <option ng-repeat="icity in city" value="{{$index}}" data-code="{{icity.code_}}" ng-bind="icity.code_text"></option>
            </select>
            <select name="real" id="area" ng-change="getStree()" ng-model="iarea.code_" disabled="disabled">
                <option value='' disabled selected style='display:none;'>区</option>
                <option ng-repeat="iarea in area" value="{{$index}}" data-code="{{iarea.code_}}" ng-bind="iarea.code_text"></option>
            </select>
            <select name="real" id="street" ng-change="getRoad()" ng-model="istree.code_" disabled="disabled">
                <option value='' disabled selected style='display:none;'>街道</option>
                <option ng-repeat="istree in street"value="{{$index}}" data-code="{{istree.code_}}" ng-bind="istree.code_text"></option>
            </select>
            <select name="real" id="road"ng-change="getQuarters()" ng-model="iroad.code_" disabled="disabled">
                <option value='' disabled selected style='display:none;'>路</option>
                <option   ng-repeat="iroad in road"value="{{$index}}" data-code="{{iroad.code_}}" ng-bind="iroad.code_text"></option>
            </select>
            <select name="real" id="cunty"ng-change="getDevice()" ng-model="icunty.code_" disabled="disabled">
                <option value='' disabled selected style='display:none;'>村/小区</option>
                <option   ng-repeat="icunty in cunty"value="{{$index}}" data-code="{{icunty.code_}}" ng-bind="icunty.code_text"></option>
            </select>
            <p ng-show="hasData"  style="color: red;font-size: 15px">暂无数据！</p>
			<ul class="cuntyUl">
               
				<li ng-repeat="device in deviceList">
                   <p>{{ device.lable | limitTo: 15 }}{{device.lable.length > 15 ? '...' : ''}}</p> 
                   <span data-buildingId="{{device.buildingId}}" ng-show="playing">播放</span>
                </li>
                
			</ul>
			
        </div>
        <div class="data-right clearfix" id="liveVideo">
          
        </div>
           
        </div>

    </div>


</div>

<style scoped="scoped">
    .cuntyUl li p{
        display: inline-block;
        width: 80%;
        padding: 0;
        font-size: 16px;
        vertical-align: middle;
        margin: 0;
    }
    .cuntyUl li span{
        border: 1px solid #fc7009;
        display: inline-block;
        width: 30px;
        height: 24px;
        vertical-align: middle;
        font-size: 12px;
        line-height:22px;
        text-align: center;
        border-radius: 4px;
        color: #fc7009;
    }

    .cuntyUl li span.videoActive{
        background-color: #6490F2;
        color: #fff;
        border: 1px solid #6490F2;
    }
    .cuntyUl{
		list-style: none;
		padding-left: 0px;
		margin-top: 15px;
	}
	.cuntyUl li{
		line-height: 30px;
		cursor: pointer;
	}
	
    .bread-crumb .changeWindows{
        position: absolute;
        right:10px;
        top:0;
        height:43px;
    }
    .changeWindows span{
        cursor: pointer;
        display: inline-block;
        height: 35px;
        width: 35px;
        margin-right: 10px;
        margin-top: 4px;
    }

    .data-left{
        float: left;
        width:18%;
        border: 1px solid #DFDFDF;
        height:100%;
        padding:1%;
        min-height: 600px;
    }
    .data-left select[name='real']{
        width: 48%;
        border: 1px solid #eee;
        text-align: center;
        border-radius: 4px;
        margin-bottom: 2%;
        cursor: pointer;
    }
    .data-left select[disabled='disabled']:hover{
    	background-image: url(../../../../res/img/ico-disable.png);
    	background-position: center;
    	background-repeat: no-repeat;
    	background-size: auto;
    }
    #liveVideo{
        float: left;
        width:80%;
        border:1px solid #DFDFDF;
        margin-left: 1%;
        min-height: 600px;
        z-index: 0;
    }
    
    .oneWin,.fourWin,.nineWin{
    	
    	background-position: center;
    	background-repeat: no-repeat;
    	background-size: contain;
    }
    .oneWin{
    	background-image: url(../../../../res/img/1gongge.png);
    }
    .fourWin{
    	background-image: url(../../../../res/img/4gongge.png);
    }
    .nineWin{
    	background-image: url(../../../../res/img/9gongge.png);
    }

    object[class='vlcPlayer'] {
        width: 100%!important;
        height:100%!important;
    }
</style>